<template>
  <div>
    <div v-show="!isShowRecord">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="充值订单号:" prop="tradeNo">
            <el-input v-model.trim="searchInfo.tradeNo" clearable ref="input-tradeNo" @keyup.enter.native="enterNextInput('telphone')" ></el-input>
          </el-form-item>
          <el-form-item label="采购商账号:" prop="telphone">
            <el-input v-model.trim="searchInfo.telphone" clearable ref="input-telphone" @keyup.enter.native="enterNextInput('enterpriseName')" ></el-input>
          </el-form-item>
          <el-form-item label="采购商企业名称:" prop="enterpriseName">
            <el-input v-model.trim="searchInfo.enterpriseName" clearable ref="input-enterpriseName" @keyup.enter.native="onSearch" ></el-input>
          </el-form-item>
          <el-form-item label="支付方式:" prop="rechargeType">
            <el-select v-model="searchInfo.rechargeType" clearable placeholder="全部">
              <el-option label="线上支付" value="1"></el-option>
              <el-option label="线下支付" value="2"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date :startTime.sync="searchInfo.startTime" :endTime.sync="searchInfo.endTime" label="充值时间段"></jxf-Date>
          <el-form-item label="核对状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部">
              <el-option label="待核对" value="0"></el-option>
              <el-option label="核对失败" value="2"></el-option>
              <el-option label="核对成功" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="rechargeAmount" slot-scope="recharge">
            <div>
              <div>￥{{recharge.row.rechargeAmount && recharge.row.rechargeAmount != 0 ? formatMoney.twoDecimal(recharge.row.rechargeAmount) : '0.00'}}</div>
            </div>
          </template>
          <template slot="rechargeType" slot-scope="recharge">
            <div v-if="recharge.row.rechargeType == '1'">线上支付</div>
            <div v-if="recharge.row.rechargeType == '2'">线下支付</div>
          </template>
          <template slot="status" slot-scope="recharge">
            <div v-if="recharge.row.status == '0'">待核对</div>
            <div v-if="recharge.row.status == '2'">核对失败</div>
            <div v-if="recharge.row.status == '1'">核对成功</div>
          </template>
          <template slot="createTime" slot-scope="order">
            <div>{{order.row.createTime ? FormatDate.timeFormat(order.row.createTime) : ""}}</div>
          </template>
          <template slot="operation" slot-scope="recharge">
            <el-button type="text" v-if="recharge.row.status == '0'" @click="goReiview(recharge.row)">审核</el-button>
            <el-button type="text" v-if="recharge.row.status == '1' || recharge.row.status == '2'" @click="watchDetail(recharge.row)">审核记录</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <OfflinePaymentReview :isShowDetail.sync="isShowReview" :dataInfo="dataInfo" @fresh="fresh"></OfflinePaymentReview>
    <AuditRecord v-if="isShowRecord" :recordInfo="recordInfo" @goBack="goBack"></AuditRecord>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  import OfflinePaymentReview from './components/OfflinePaymentReview'
  import AuditRecord from './components/AuditRecord'
    export default {
        name: "RechargeCheck",
        components: { OfflinePaymentReview, AuditRecord },
        data() {
          return {
            title: '充值核对',
            searchInfo: {
              tradeNo: "",
              telphone: "",
              enterpriseName: "",
              status: "",
              rechargeType: "",
              startTime: "",
              endTime: ""
            },
            isSuccess: false,
            isShowReview: false,
            isShowRecord: false,
            recordInfo: {

            },
            formatMoney: formatMoney,
            FormatDate: FormatDate,
            // 审核传参
            dataInfo: {},
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              tr: [
                {
                  id: '1',
                  label: '充值订单号',
                  fixed: "left",
                  width: '210',
                  prop: 'tradeNo'
                },
                {
                  id: '2',
                  minWidth: '140',
                  label: '采购商企业名称',
                  prop: 'enterpriseName'
                },
                {
                  id: '3',
                  minWidth: '100',
                  label: '采购商账号',
                  prop: 'telphone'
                },
                {
                  id: '4',
                  label: '充值金额',
                  prop: 'rechargeAmount',
                  show: 'template'
                },
                {
                  id: '5',
                  label: '支付方式',
                  prop: 'rechargeType',
                  show: 'template'
                },
                {
                  id: '6',
                  label: '充值时间',
                  show: 'template',
                  width: '160',
                  prop: 'createTime'
                },
                {
                  id: '7',
                  label: '核对状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '8',
                  label: '操作',
                  show: 'template',
                  fixed: "right",
                  minWidth:"200",
                  prop: 'operation'
                }
              ],
              data: []
            },
            pageTotal:40,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          // 导出
          exportExcel() {
            this.isSuccess = true;
            let data = {
              ...this.searchInfo
            }
            ajax.export(apis.finance.exportRechargeList, data).then((res) => {
              this.isSuccess = false;
              if(res.code) {
                if(res.code === "10000000") {

                } else {
                  this.$message.error(res.message)
                }
              }
            })
          },
          refreshFuc() {
            this.resetForm('searchInfo')
            this.currentPage = 1;
            this.pageSize = 10
            this.getData()
          },
          fresh() {
            this.getData()
          },
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.finance.getRechargeList, data).then(res => {
              if(res.code === "10000000") {
                this.dataTable.data = res.data.dataList;
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false;
            })
          },
          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },
          onSearch() {
            this.currentPage = 1;
            this.getData();
          },
          // 详情返回前面一个页面
          goBack() {
            this.isShowRecord = false;
          },
          // 进入详情
          watchDetail(obj) {
            this.recordInfo.basicInfo = [{
              label: '采购商账号',
              value: obj.telphone
            }, {
              label: '采购商地址',
              value: obj.detailAdress
            }, {
              label: '联系电话',
              value: obj.telphone
            }, {
              label: '线下打款金额',
              value: obj.amount ? formatMoney.twoDecimal(obj.amount) : '0.00'
            }, {
              label: '打款时间',
              value: obj.auditTime ? FormatDate.timeFormat(obj.auditTime) : ""
            }, {
              label: '核对状态',
              value: obj.status == '0' ? "待审核" : obj.status == '2' ? "审核失败" : "审核成功"
            }]
            this.recordInfo.otherInfo = obj;
            this.isShowRecord = true;
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
          // 打开审核弹出框
          goReiview(obj) {
            this.dataInfo = obj
            this.isShowReview = true;
          }
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style scoped>

</style>
